<template>
	<view>
		<view class="head_context">
			按国家电子商务法要求，出于上门服务及保障您工钱资金安全的考虑，请进行实名认证，仅按规定实名认证身份信息，不做其他用途
		</view>
		<view class="info">
			<view class="form-item">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/name_worker.png" class="img" />
				<input type="text" class="input" placeholder="请输入真实姓名" placeholder-style="font-size:30rpx;color:#B2B5BE"
					name="worker_name" value="" v-model="name" />
			</view>
			
			<view class="form-item">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/worker_identity.png" class="img" />
				<input type="text" class="input" placeholder="请输入身份证号" placeholder-style="font-size:30rpx;color:#B2B5BE"
					name="identity" value="" v-model="identity" />
			</view>
			
			<!-- <view class="form-item">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/phone.png" class="img" />
				<input type="text" readonly="true" class="input" placeholder="请输入电话号码" placeholder-style="font-size:30rpx;color:#B2B5BE"
					name="tel" :value="tel" />
			</view>
			
			<view class="form-item">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/reg-pwd.png" class="img" />
				<input type="text" class="input" placeholder="6-16位字母数字组合密码"
					placeholder-style="font-size:30rpx;color:#B2B5BE"
					value="" :password="true" v-model="passwd" />
			</view>
			
			<view class="form-item">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/reg-pwd.png" class="img" />
				<input type="text" class="input" placeholder="再次输入登录密码"
					placeholder-style="font-size:30rpx;color:#B2B5BE"
					value="" :password="true" v-model="passwd1" />
			</view> -->
			
			<view class="form-item" @click="jineng_wins" data-url="jineng">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/show-list.png" class="img" />
				<view class="jineng">
					选择技能 (必填)
				</view>
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/arrowright.png" class="img" style="position: absolute;right: 0;" />
			</view>
		</view>
		<view class="sfz">
			<view class="title">
				上传身份证照片
			</view>
			<view class="sfz_context">当前实名信息必须与您的微信、支付宝、银行卡的实名信息一致，否则无法结算您的工钱</view>
			<upload_sfz @child-click="editorChooseImage" :obverse-url="obverseUrl" :reverse-url="reverseUrl"
				@selectChange="sfz_chagne" @del="del_btn"></upload_sfz>
			<view style="color: #999;text-align: center;margin-top: 20rpx;">（请确保身份证正面和反面清晰）</view>
		</view>
		<view class="bottom">
			<button class="btn1" @tap.stop="formSubmit" style="background-color: #a5c44d; color: #fff;">提交</button>
		</view>
		<popupCheckbox ref="popupCheckbox" title="选择技能" v-model="checkList" @submit="submit"></popupCheckbox>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				checkList: [],
				// 正面
				obverseUrl: "",
				// 反面
				reverseUrl: "",
				name: "",
				identity: "",
				tel: "",
				passwd: "",
				passwd1: "",
				jineng: [],
				mid: 0
			}
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.mid = opt.mid;
			this.getdata();
		},
		onShow: function() {
		
		},
		onPullDownRefresh: function() {
		},
		methods: {
			getdata(){
				var that = this;
				app.get('ApiYuyue/get_authentication_data', {
					mid: that.mid
				}, function(res) {
					if(res.status == 1){
						var cache = {};
						var data = res['data'];
						for (let i = 0;i<data.length;i++) {
							cache['id'] = data[i]['id'];
							cache['name'] = data[i]['name'];
							cache['select'] = false;
							that.checkList.push(cache);
							cache = {};
						}
						that.tel = res.tel;
					}else{
						app.alert(res.msg);
						setTimeout(function() {
							app.goto("/pages/my/usercenter", "reLaunch");
						}, 1000);
					}
				});
			},
			// 身份证
			// 上传
			sfz_chagne(e) {
				if (e.name == "obverse") {
					this.obverseUrl = e.tempFilePath
				} else if (e.name == "reverse") {
					this.reverseUrl = e.tempFilePath
				}
			},
			// 删除
			del_btn(e) {
				if (e.name == "obverse") {
					this.obverseUrl = ""
				} else if (e.name == "reverse") {
					this.reverseUrl = ""
				}
			},
			//提交
			formSubmit: function(e) {
				var that = this;
				var cache = [];
				if (that.jineng.length == 0) {
					app.alert('请填写您的技能');
					return;
				}else{
					for(let i = 0;i<that.jineng.length;i++){
						cache.push(that.jineng[i].id);
					}
				}
				var jineng = cache.join(',');
				
				var regExp = "";
				// regExp = /^[\u4e00-\u9fa5]{2,5}$/;
				// if (!regExp.test(that.name)) {
				// 	app.alert('请输入正确的姓名');
				// 	return;
				// }
				// regExp = /^1[3|4|5|7|8][0-9]{9}$/;
				// if (!regExp.test(that.tel)) {
				// 	app.alert('请输入正确的电话号码');
				// 	return;
				// }
				
				// if (that.passwd == '' || that.passwd1 == '') {
				// 	app.alert('请输入密码');
				// 	return;
				// }
				
				// if (that.passwd.length < 6) {
				// 	app.alert('新密码不小于6位');
				// 	return;
				// }
				
				// if (that.passwd != that.passwd1) {
				// 	app.alert('两次密码不一致');
				// 	return;
				// }
				
				// regExp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				// if (!regExp.test(that.identity)) {
				// 	app.alert('身份证格式不正确');
				// 	return;
				// }
				
				if (that.obverseUrl == "" || that.reverseUrl == "") {
					app.alert('请上传完全身份证照片信息');
					return;
				}
				var identity_pic = [that.obverseUrl, that.reverseUrl];
				
				app.showLoading('提交中');
				app.post("ApiYuyue/authentication", {
					name: that.name,
					jineng: jineng,
					tel: that.tel,
					identity: that.identity,
					// passwd: passwd,
					// passwd1: passwd1,
					identity_pic: JSON.stringify(identity_pic),
					qid: app.getCache('qid')
				}, function(res) {
					if (res.status == 1) {
						app.showLoading(false);
						app.alert(res.msg);
						setTimeout(function() {
							app.goto("/pages/my/usercenter", "reLaunch");
						}, 1000);
					} else {
						app.error(res.msg);
					}
				});
			},
			jineng_wins() {
				this.$refs.popupCheckbox.open();
			},
			submit(e) {
				this.jineng = e;
			}
		}
	}
</script>

<style>
	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px #ededed solid;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: 1px solid #F0F3F6;
		margin-top: 20rpx
	}

	.info {
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 10px
	}

	.img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx
	}

	.sfz {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 10px
	}

	.title {
		opacity: 1;
		font-size: 40rpx;
		font-weight: bold;
	}

	.sfz_context {
		padding: 30rpx;
		color: red;
	}

	.btn1 {
		width: 100%;
		height: 88rpx;
		border-radius: 88rpx;
		line-height: 88rpx;
		margin: 20rpx 0;
		text-align: center;
		font-weight: bold;
	}

	.bottom {
		padding-left: 80rpx;
		padding-right: 80rpx;
		padding-bottom: 80rpx;
	}

	.head_context {
		padding: 25rpx;
		background-color: antiquewhite;
		font-size: 30rpx;
		line-height: 40rpx;
	}
	
	.jineng {
		font-size: 30rpx;
		color: red;
		z-index: 10;
	}
</style>